<template>
  <my-layout :tabbar-is-show="false" :is-absolute-body="false">
    <template #Navbar>
      <view
        style="
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          position: relative;
        "
      >
        <image
          @click="goback()"
          :src="indexTabBarUrl.navigateBack"
          style="width: 30rpx; height: 30rpx; margin-left: 40rpx"
        />
        <view
          style="
            font-weight: bold;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
          "
          >订单</view
        >
      </view>
    </template>
    <template #Body>
      <view class="orders">
        <!--菜单-->
        <view class="orders_menu">
          <view
            @click="tabOrderShow(1)"
            :class="[orderIndex == 1 ? 'orders_m_hovers' : '']"
          >
            <text :style="{ color: orderIndex == 1 ? 'black' : '' }">全部</text>
            <image
              src="http://llg.qiniu.comeinvip.com/images/members/orders_ico.png"
            ></image>
          </view>
          <view
            @click="tabOrderShow(2)"
            :class="[orderIndex == 2 ? 'orders_m_hovers' : '']"
          >
            <text :style="{ color: orderIndex == 2 ? 'black' : '' }"
              >待付款</text
            >
            <image
              src="http://llg.qiniu.comeinvip.com/images/members/orders_ico.png"
            ></image>
          </view>
          <view
            @click="tabOrderShow(3)"
            :class="[orderIndex == 3 ? 'orders_m_hovers' : '']"
          >
            <text :style="{ color: orderIndex == 3 ? 'black' : '' }"
              >已支付</text
            >
            <image
              src="http://llg.qiniu.comeinvip.com/images/members/orders_ico.png"
            ></image>
          </view>
          <view
            @click="tabOrderShow(4)"
            :class="[orderIndex == 4 ? 'orders_m_hovers' : '']"
          >
            <text :style="{ color: orderIndex == 4 ? 'black' : '' }"
              >已核销</text
            >
            <image
              src="http://llg.qiniu.comeinvip.com/images/members/orders_ico.png"
            ></image>
          </view>
        </view>
        <!--tab-->
        <view style="flex: 1; min-height: 0; overflow: hidden">
          <swiper
            style="height: 100%"
            :current="menuIndex"
            @change="swiperChange"
          >
            <swiper-item>
              <!--全部-->
              <view
                style="height: 100%; padding: 28rpx; box-sizing: border-box"
              >
                <scroll-view
                  :scroll-y="true"
                  enhanced
                  :show-scrollbar="false"
                  style="height: 100%"
                >
                  <order-list
                    :list="allList"
                    @wait-use-go="waitUseGo"
                    @is-used-go="isUsedGo"
                  />
                </scroll-view>
              </view>
            </swiper-item>
            <swiper-item>
              <scroll-view :scroll-y="true" style="height: 100%">
                <!--待付款-->
                <view
                  style="height: 100%; padding: 28rpx; box-sizing: border-box"
                >
                  <scroll-view
                    :scroll-y="true"
                    enhanced
                    :show-scrollbar="false"
                    style="height: 100%"
                  >
                    <order-list
                      :list="waitPayList"
                      @wait-use-go="waitUseGo"
                      @is-used-go="isUsedGo"
                    />
                  </scroll-view>
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view :scroll-y="true" style="height: 100%">
                <!--已支付-->
                <view
                  style="height: 100%; padding: 28rpx; box-sizing: border-box"
                >
                  <scroll-view
                    :scroll-y="true"
                    enhanced
                    :show-scrollbar="false"
                    style="height: 100%"
                  >
                    <order-list
                      :list="waitUseList"
                      @wait-use-go="waitUseGo"
                      @is-used-go="isUsedGo"
                    />
                  </scroll-view>
                </view>
              </scroll-view>
            </swiper-item>
            <swiper-item>
              <scroll-view :scroll-y="true" style="height: 100%">
                <!--已核销-->
                <view
                  style="height: 100%; padding: 28rpx; box-sizing: border-box"
                >
                  <scroll-view
                    :scroll-y="true"
                    enhanced
                    :show-scrollbar="false"
                    style="height: 100%"
                  >
                    <order-list
                      :list="isUsedList"
                      @wait-use-go="waitUseGo"
                      @is-used-go="isUsedGo"
                    />
                  </scroll-view>
                </view>
              </scroll-view>
            </swiper-item>
          </swiper>
        </view>
      </view>
    </template>
  </my-layout>
</template>

<script>
import util from "@/utils/util.js";
import navBar from "@/components/navbar/navbar.vue";
import indexTabBarUrl from "@/url/index_tabBar";
import OrderList from "@/components/order-list/index.vue";
import ListItem from "@/components/order-list/index";
export default {
  components: {
    "nav-bar": navBar,
    OrderList,
  },
  data() {
    return {
      indexTabBarUrl,
      navbarData: {
        // 头部组件所需参数
        showCapsule: 2, //是否显示左上角返回图标   1表示显示白箭头    0表示不显示  2显示黑箭头
        positionShow: 0, //0不显示定位 1 显示定位
        backgroundCor: 2, //0 无背影色 1首页背景颜色   2白色
        statusBarHeight: uni.getSystemInfoSync()["statusBarHeight"],
        navHeight: 45,
        titles: "",
      },
      orderIndex: 1,
      menuIndex: 0,
      allList: [
        new ListItem(
          "沈阳市中街刘老根大舞台1",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
      ],
      waitPayList: [
        new ListItem(
          "沈阳市中街刘老根大舞台2",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitPay"
        ),
      ],
      waitUseList: [
        new ListItem(
          "沈阳市中街刘老根大舞台3",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "waitUse"
        ),
      ],
      isUsedList: [
        new ListItem(
          "沈阳市中街刘老根大舞台4",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
        new ListItem(
          "沈阳市中街刘老根大舞台",
          "2018/11/28 19:30",
          "c区5排",
          323634534636,
          "2018/11/22 19:38",
          128,
          "isUsed"
        ),
      ],
    };
  },
  methods: {
    goback() {
      uni.navigateBack();
    },
    //跳转到已支付页面
    waitUseGo(event) {
      uni.navigateTo({
        url: "/pages/members/orderPaid/orderPaid",
      });
    },
    //跳转到核销页面
    isUsedGo(event) {
      uni.navigateTo({
        url: "/pages/members/orderVerified/orderVerified",
      });
    },
    //切换菜单
    tabOrderShow(index) {
      this.orderIndex = index;
      this.menuIndex = parseInt(index) - 1;
    },
    //滑动切换
    swiperChange(index) {
      this.menuIndex = index.detail.current;
      this.orderIndex = parseInt(index.detail.current) + 1;
    },
  },
  onLoad(options) {
    //获取传递参数切换页面
    this.orderIndex = options.navindex;
    this.menuIndex = parseInt(this.orderIndex) - 1;
  },
};
</script>

<style>
@import url("@/static/css/member.css");
</style>
